<!-- 练习题 -->
<template>
  <el-main style="padding: 20px">
    <el-button
      size="small"
      @click="addTimu"
      type="primary"
      style="display: block; margin-bottom: 10px"
      >添加习题（带有图片或视频）</el-button
    >
    <el-upload
      class="upload-demo"
      :action="url"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :file-list="fileList"
    >
      <el-button size="small" type="primary"
        >导入习题(请导入.csv文件，编码为utf-8)</el-button
      >
    </el-upload>
    <el-button
      size="small"
      @click="delExam"
      type="primary"
      style="display: block; margin-top: 10px"
      >删除选中</el-button
    >
    <!-- 添加习题 带视频图片的 -->
    <el-dialog
      title="添加习题"
      style="padding: 0px"
      :close-on-click-modal="false"
      :visible.sync="xiti"
    >
      <el-form
        :model="xitiData"
        :rules="xitirules"
        ref="addxitiData"
        style="margin: 0px; padding: 0px"
      >
        <el-form-item label="题目:" prop="timu">
          <el-input
            prefix-icon="el-icon-edit"
            v-model="xitiData.content"
            size="mini"
            placeholder="请输入题目"
          ></el-input>
        </el-form-item>

        <el-form-item label="题目图片" prop="img">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="/file/upload"
            name="fileData"
            :on-success="handleAvatarSuccess1"
          >
            <img v-if="xitiData.imgUrl" :src="xitiData.imgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="题目视频" prop="video">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="/file/upload"
            name="fileData"
            :on-success="handleAvatarSuccess2"
          >
            <video
              v-if="xitiData.fileUrl"
              height="300px"
              preload="auto"
              controls=""
              :src="xitiData.fileUrl"
            ></video>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="答案解析:" prop="analysis">
          <el-input
            prefix-icon="el-icon-edit"
            v-model="xitiData.analysis"
            size="mini"
            placeholder="请输入答案解析"
          ></el-input>
        </el-form-item>

        <el-form-item label="答案:" prop="answer">
          <el-input
            prefix-icon="el-icon-edit"
            v-model="xitiData.answer"
            size="mini"
            placeholder="请输入答案"
          ></el-input>
        </el-form-item>

        <el-form-item label="选项:" prop="item">
          <el-input
            prefix-icon="el-icon-edit"
            v-model="xitiData.item"
            size="mini"
            placeholder="非必填项，判断题和选择题得多项用 - 隔开"
          ></el-input>
        </el-form-item>

        <el-form-item label="难度:" prop="item">
          <el-input
            prefix-icon="el-icon-edit"
            v-model="xitiData.level"
            size="mini"
            placeholder="从1到3，数字越大难度越高"
          ></el-input>
        </el-form-item>

        <el-select placeholder="请选择章节" v-model="chapter">
          <el-option
            v-for="(item, index) in zhangjieList"
            :key="index"
            :label="item.chapterName"
            :value="item.chapterId"
          >
            {{ item.chapterName }} {{ item.chapterId }}
          </el-option>
        </el-select>

        <!-- <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select> -->

        <el-form-item>
          <el-button size="mini" @click="cancelEidt">取 消</el-button>
          <el-button size="mini" type="primary" @click="addxiti('addxitiData')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--  -->
    <el-radio-group v-model="radio" style="margin-top: 20px" v-if="typeList">
      <el-radio
        :label="item.categoryCode"
        v-for="(item, index) in typeList"
        :key="index"
        >{{ item.categoryName }}</el-radio
      >
    </el-radio-group>

    <div class="table-box">
      <el-table
        :data="dataExam"
        ref="multipleTable"
        @select="onTableSelect"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          width="55"
          @selection-change="handleSelectionChange"
        ></el-table-column>
        <el-table-column prop="content" label="题目" width="320"></el-table-column>
        <el-table-column
          v-if="dataExam.type == 1"
          prop="item"
          label="选项"
        ></el-table-column>
        <el-table-column prop="answer" label="答案" width="320"></el-table-column>
        <el-table-column prop="analysis" label="答案解析"></el-table-column>
        <el-table-column prop="item" label="选项"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="setbianji(scope.row)" type="text" size="mini"
              >编辑</el-button
            >
            <el-button type="text" size="mini" @click="deleteObj(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="tianjia" width="80%">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="题目"
            ><el-input v-model="form.content" placeholder="about"></el-input
          ></el-form-item>
          <el-form-item label="答案解析"
            ><el-input type="textarea" v-model="form.analysis"></el-input
          ></el-form-item>
          <el-form-item label="答案"
            ><el-input type="textarea" v-model="form.answer"></el-input
          ></el-form-item>
          <el-form-item label="选项"
            ><el-input
              type="textarea"
              v-model="form.item"
              placeholder="非必填,判断题和选择题的多选项用 - 隔开"
            ></el-input
          ></el-form-item>
          <el-form-item label="类型">
            <!-- <el-input type="textarea" v-model="form.type"></el-input> -->
            <el-radio-group v-model="setradio" style="margin-top: 20px">
              <el-radio
                :label="item.categoryCode"
                v-for="(item, index) in typeList"
                :key="index"
                >{{ item.categoryName }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="tianjia = false">取消</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="mini" @click="setWord()">添加</el-button>
    </el-dialog>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="data.pages"
        :current-page="current"
        @current-change="chaxun"
      ></el-pagination>
    </div>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      chapter: "",
      xiti: false,
      xitiData: {
        content: "",
        imgUrl: "",
        fileUrl: "",
        analysis: "",
        answer: "",
        item: [],
        type: 9,
        level: "",
        chapterId: "",
      },
      setradio: "",
      radio: "",
      select: [],
      form: {},
      fileList: [],
      page: 1,
      typeList: [],
      dataExam: [],
      current: 1,
      size: 20,
      xitirules: {
        content: [{ required: true, message: "必填:题目", trigger: "blur" }],
        answer: [{ required: true, message: "必填:答案", trigger: "blur" }],
      },
      tianjia: false,
      zhangjieList: [],
      url: "http://localhost:8082/back/practicestores/importPractice",
    };
  },
  mounted: function () {
    this.addWord();
    this.getType();
    this.getZj();
    // POST /back/practicestores/importPractice
  },
  watch: {
    radio() {
      this.page = 1;
      this.addWord();
    },
  },
  inject: ["reload"],
  methods: {
     onTableSelect(rows, row) {
      this.selected = rows.length && rows.indexOf(row) !== -1;
      //console.log(this.selected);
    },
    async getZj() {
      const res = await this.postJson("/back/chapter/queryPracticeChapterList");
      this.zhangjieList = res.data.data;
      //console.log(res);
    },
    async addxiti(e) {
      //console.log(this.chapter);
      this.xitiData.chapterId = this.chapter;
      const data = await this.postJson("/back/practicestores/addPractice", this.xitiData);
      //console.log(data.data.status);
      if (data.data.status == "success") {
        this.$message(data.data.msg);
        this.cancelEidt();
      }
      //console.log(data);
      //console.log(this.xitiData);
      //console.log(this.$refs[e]);
    },
    // 添加题目
    addTimu() {
      //console.log("ok");
      this.xiti = true;
    },
    cancelEidt() {
      this.xiti = false;
    },
    handleAvatarSuccess1(res, file) {
      this.xitiData.imgUrl = res.url;
      //console.log(this.xitiData.imgUrl);
    },
    handleAvatarSuccess2(res, file) {
      this.xitiData.fileUrl = res.url;
      //console.log(this.xitiData.fileUrl);
    },
    // beforeAvatarUpload(file) {
    //   const isJPG = (file.type === 'image/jpeg' || file.type === 'image/gif'
    //     || file.type === 'image/png');
    //   const isLt2M = file.size / 1024 / 1024 < 20;
    //   if (!isJPG) {
    //     this.$message.error('上传头像图片只能是 JPG 格式!');
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 20MB!');
    //   }
    //   return isJPG && isLt2M;
    // },

    //
    handleSelectionChange(e) {
      //console.log(e);
      this.select = e;
    },
    delExam() {
      let arr = [];
      this.select.forEach((item) => {
        arr.push(item.practiceId);
      });
      arr = arr.join(",");
      //console.log(arr);
      this.postRequest("/back/practicestores/deletePractice", { ids: arr }).then(
        (res) => {
          //console.log(res);
          this.reload();
          this.$message(res.data.msg);
        }
      );
    },
    deleteObj(e) {
      this.postRequest("/back/practicestores/deletePractice?ids=" + e.practiceId).then(
        (res) => {
          //console.log(res);
          this.reload();
          this.$message(res.data.msg);
        }
      );
    },
    setbianji(e) {
      this.form = e;
      this.setradio = this.form.type;
      this.tianjia = true;
    },
    onSubmit() {
      //console.log(this.form);
      if (this.form.item != null) {
        this.form.item = this.form.item.split("-");
      }
      // isArray(item.item)
      this.postJson(
        "/back/practicestores/updatePractice?id=" + this.form.practiceId,
        this.form
      ).then((res) => {
        //console.log(res);
        this.$message(res.data.msg);
      });
    },
    chaxun(val) {
      //console.log(val);
      this.page = val;
      this.addWord();
    },
    getType() {
      this.postRequest("/comm/queryCategoryByType", { type: "practice_type" }).then(
        (res) => {
          //console.log(res);
          this.typeList = res.data.data;
          this.radio = this.typeList[0].categoryCode;
        }
      );
    },
    addWord() {
      let params = {
        page: this.page,
        size: this.size,
        type: this.radio,
      };
      this.postRequest(`/back/practicestores/queryPracticeList`, params).then((res) => {
        this.dataExam = res.data.data.list;
        this.dataExam.forEach((item, i) => {
          if (Array.isArray(item.item)) {
            this.dataExam[i].item = item.item.join(" - ");
          }
          // isArray(item.item)
        });
        this.data = res.data.data;
        //console.log(res);
      });
    },
    handleRemove(file, fileList) {
      //console.log(file, fileList);
    },
    handlePreview(file) {
      //console.log(file);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
